<template>
    <div id="topoengineroom">
        <vHeadSpace />
        <div id="topocontainer">
            <vAsideSpace />
            <el-main class="topo-main">
                <div class="outcontainer-right-content">
                    <!-- title -->
                    <div style="height: 70px;">
                        <h3 class="left_title">机房预览</h3>
                        <el-button @click="dialogFormVisible = true" type="success" size="small" style="float: left;margin-left: 0">创建机房</el-button>
                    </div>
                    <!--主内容-机房预览-->
                    <div style="height: 485px;background-color: whitesmoke;margin-top: 3rem">
                        <el-table
                                :data="engineRooms"
                                height="100%"
                                border
                                style="width: 100%"
                                :cell-style="{padding:'8px'}">
                            <el-table-column
                                    prop="engineroom_number"
                                    label="机房编号"
                                    align="center"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="机房名称"
                                    align="center"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="description"
                                    label="机房描述"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="operation"
                                    align="center"
                                    label="相关操作">
                                <template slot-scope="scope">
<!--                                    <el-button size="small">编辑</el-button>-->
<!--                                    <el-button size="small" @click="deleteRoom(scope.row)">删除</el-button>-->
                                    <el-button size="small" @click="getCabinets(scope.row)">查看机柜</el-button>
                                    <el-button size="small">其它操作</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <!--弹窗-创建机房-->
                    <div>
                        <el-dialog title="创建机房" :visible.sync="dialogFormVisible">
                            <el-form :model="form">
                                <el-form-item label="机房编号" :label-width="'120px'">
                                    <el-input v-model="engineroom_number" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="机房名称" :label-width="'120px'">
                                    <el-input v-model="name" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="机房描述" :label-width="'120px'">
                                    <el-input v-model="description" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="createRoom(engineroom_number,name,description)">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </div>
                <div class="outcontainer_right_bottom">
                    <vFootSpace />
                </div>
            </el-main>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
              cabinetsData: [],
              dialogFormVisible: false,
              engineroom_number: '', // 机房编号
              name: '',//机房名称
              description: '', //机房描述
              engineRooms: [],
              imgsrc: require('../../assets/img/topo/topo.png'),// 机房图片路径
              form: {
                  name: '',
                  region: '',
                  date1: '',
                  date2: '',
                  delivery: false,
                  type: [],
                  resource: '',
                  desc: ''
              },
            }
        },
        methods:{
            // 创建主机
            createRoom(num,name,des) {
                this.$axios({
                  method: "post",
                  url:"map/createEngineRoom.action",
                  data: {
                    engineroom_number: num,
                    name: name,
                    description: des,
                  }
                }).then((response)=> {
                  console.log(response)
                  this.dialogFormVisible = false; //关闭dialog
                  this.engineroom_number = '';    //清空输入框
                  this.name = '';
                  this.description = '';
                  // 显示添加成功
                  this.$message({
                    message: '机房添加成功',
                    type: 'success'
                  });
                  // 重新请求机房数据
                  this.getRoomData();
                }).catch(()=> {
                  this.dialogFormVisible = false;
                  this.$message({
                    type: 'error',
                    message: '机房添加失败'
                  });
                })
                // this.engineRooms.push({
                //     name:name,
                //     description:des,
                //     // operation:"略"
                // });

            },
            // 删除机房
            deleteRoom(row) {
              console.log(row)
              this.$confirm('是否确认删除机房'+row.name,'提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$axios({
                  method: "post",
                  url: "map/deleteEngineRoomSingleOrMore.action",
                  data:{
                    engineRoomNumber:[row.engineroom_number]
                  },
                }).then((response) => {
                  console.log(response)
                  this.$message({
                    message: '机房删除成功',
                    type: 'success'
                  });
                  this.getRoomData()
                }).catch(() => {
                  this.$message({
                    type: 'error',
                    message: '机房删除失败'
                  });
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              })
            },
            getRoomData() {
              this.$axios({
                method: "post",
                url: "map/getAllEngineRoomsOrsingle.action"
              }).then((response)=> {
                this.engineRooms = response.data.content.result
              })
              .catch((error)=> {
                    console.log(error)
                  })
            },
            enterRoom(name){
                // this.$router.push('/topoCabinet')
            },
            // 查看机房详情
            getCabinets(row){
              this.$router.push('/topoCabinet/'+row.name+'/'+row.engineroom_number)
            }
        },
      mounted() {
          this.getRoomData()
      }
    }
</script>

<style scoped>
    #topoengineroom{
        height: 100%;
        width: 100%;
        background-color: #F0F2F5;
        position: absolute;
    }
    #topocontainer{
        display: flex;
        margin-top: 60px;
        height: 92%;
        width: 100%;
    }
    .topo-main{
        height: 100%;
        width: 100%;
        margin-top: 0;
        padding:10px;
    }
    .outcontainer-right-content {
        height: 97%;
        overflow-x:hidden
    }
    .outcontainer_right_bottom{
        height:3%;
        background-color: #F0F2F5;
        text-align: center;
    }
    .left_title{
        text-align: center;
        margin: 20px;
        margin-top: 0;
        margin-left: 0;
        padding: 0;
        font-size: 32px;
    }
    .room_icon {
        margin-left: 30rem;
        cursor: pointer;
    }
    .el-menu-room {
      margin-top: 3rem;
    }
    .el-button--success {
      margin-left: 68rem;
      color: #FFF;
      background-color: #67C23A;
      border-color: #67C23A;
    }
    /*.icon_tooltip {*/
    /*    color: red;*/
    /*}*/
</style>